<template>
    <!-- <transition name="bounce"> -->
        <div class="confirm" :class="{'hidden': !visible}" :style="{'width': width}">
            <div class="bg"></div>
            <!-- <div class="container" :style="{width: width}"> -->
                <div class="header">{{title}}
                    <i @click="close" class="icon icon-tuichu"></i>
                </div>
                <div class="content">
                    <slot name="content">{{content}}</slot>
                </div>
                <div class="footer" slot="footer">
                   
                        <span class="btn btn-tint" @click="confirm">确定</span>
                        <span class="btn btn-gray" @click="close" v-if="showCancelBtn">取消</span>
                </div>
            </div>
        </div>
    <!-- </transition> -->
</template>

<script type="text/javascript">
	/*
	* 使用模板的方式调用
	* 1.引用模板 import vConfirm from './../utils/confirm.vue'
	* 2.注册模板 compontents:{vConfirm}
	* 3.页面标签调用 
	*<v-confirm :visible="show" @cancel="cancel" @confirm="confirm" :showCancelBtn="false">
	*	这里是我们可以传入自定义的内容
	*	<span slot="content">测试confirm</span>
	*</v-confirm>
	*4.传参和默认值： 
	*	visible: 布尔值，默认为false，模态框是否显示
	*	width: 模态框的宽度，默认为'260px',//传入字符串样式-> '260px' 
	*	showCancelBtn: 布尔值，默认为true， 是否显示关闭按钮
	*	@cancel:用户点击关闭按钮调用的函数
	*	@confirm：用户点击确认按钮触发的函数
	*	@content: 文本，没有主题的时候可以使一句话
	*	 
	* 
	 */
	
	export default {
	      name: 'confirm',
	      props: {
	        width: {
	          type: String,
	          default: '260px'
	        },
	        title: {
	          type: String,
	          default: '信息'
	        },
	        content: {
	          type: String,
	          default: '内容呀'
	        },
	        visible: {
	          type: Boolean,
	          default: true
	        },
	        closeVisible: {
	          type: Boolean,
	          default: false
	        },
	        showCancelBtn:{
	        	type: Boolean,
		    	default: true
	        }
	      },
	      data () {
	        return {
	        }
	      },
	      methods: {
	        close () {
	        // 这个事件在使用模板调用的时候调用
	          this.$emit('cancel', false)
	          // 这个事件是通过this.$comfirm调用的时候调用
	          this.closeConfirm && this.closeConfirm()
	        },
	        confirm(){
	        	// 这个事件在使用模板调用的时候调用
	        	this.$emit('confirm', false)
				
	        	// 这个事件是通过this.$comfirm调用的时候调用
	        	this.submitConfirm && this.submitConfirm()
	        }
	      }
	}
</script>

<style scoped lang="less">
	@import url("../../assets/css/variable.less");
	@import url("../../assets/css/public.less");
	.confirm{
		&{
			.transition(@property: opacity, transform;);
			position: fixed;
		    left:50%;
		    top: 50%;
		    transform:translate(-50%,-50%) scale(1);
		    z-index:9999;
			display: inline-block;
			.border(@color: @border-color);
			background: @color;
		}

		.header{
			height: 40px;
			color: @color;
			line-height: 40px;
			padding: 0 10px;
			background: @main-tint-bg;
		}
		.icon-tuichu{
			position: absolute;
			right: 0;
			cursor: pointer;
		}
		.content{
			color: @color-1;
			padding: 20px;
			line-height: 26px;
			text-align: center;
		}
		.footer{
			.border-top(@color: @border-color);
			text-align:center;
			padding: 10px 0;
			.btn{
				border: none;
			}
		}

	}
	.hidden {
	    transform: scale(0);
	    opacity: 0;
	}
</style>
